<template>
  <div class="info">
    <div class="top">
      <div class="info-box">
        <div class="info-title">留言单号：</div>
        <div class="info-value">{{value.id || '无'}}</div>
      </div>
      <div class="info-box">
        <div class="info-title">诉求标题：</div>
        <div class="info-value">{{value.eventTitle || '无'}}</div>
      </div>
      <div class="info-box">
        <div class="info-title">事发地点：</div>
        <div class="info-value">{{value.eventCountry || '无'}}</div>
      </div>
      <div class="info-box">
        <div class="info-title">事件类型：</div>
        <div class="info-value">{{value.reportType || '无'}}</div>
      </div>
      <div class="info-box">
        <div class="info-title">提交人：</div>
        <div class="info-value">{{value.linkName || '无'}}</div>
      </div>
      <div class="info-box">
        <div class="info-title">联系方式：</div>
        <div class="info-value">{{value.linkPhone || '无'}}</div>
      </div>
      <div class="info-box">
        <div class="info-title">诉求内容：</div>
        <div class="info-value">{{value.eventContent || '无'}}</div>
      </div>
      <div class="info-box">
        <div class="info-title">上报图片：</div>
        <div
          class="img-list info-value"
          v-if="value.photos.length"
        >
          <div
            class="img-item"
            v-for="(item, index) in value.photos"
            :key="index"
          >
            <el-image
              fit="contain"
              style="width: 50px; height: 50px"
              :src="item.url"
              :preview-src-list="imgList"
              @click.stop="handleClickItem"
            >
            </el-image>
          </div>
        </div>
        <div
          v-else
          class="img-list info-value"
        >
          无
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="info-box">
        <div class="info-title">回复详情：</div>
        <div
          class="info-value"
          v-if="value.replys.length"
        >
          <el-timeline>
            <el-timeline-item
              v-for="(item, index) in value.replys"
              :key="index"
              :timestamp="item.replyContent"
            >
              {{item.replyTime}}
            </el-timeline-item>
          </el-timeline>
        </div>
        <div
          class="info-value"
          v-else
        >
          无
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'info',
  props: {
    value: {
      id: '',
      anonymous: '',
      createUserName: '',
      eventContent: '',
      eventCountry: '',
      eventTitle: '',
      handleStatus: '',
      levelMesageStatus: '',
      linkName: '',
      linkPhone: '',
      linkSecrecyStatus: '',
      photos: [],
      replys: [],
      reportTime: '',
      reportType: ''
    },
    imgList: {
      type: Array,
      default: []
    }
  },
  methods: {
    handleClickItem() {
      this.$nextTick(() => {
        // 获取遮罩层dom
        const domImageMask = document.querySelector('.el-image-viewer__mask')
        if (!domImageMask) {
          return
        }
        domImageMask.addEventListener('click', () => {
          // 点击遮罩层时调用关闭按钮的 click 事件
          document.querySelector('.el-image-viewer__close').click()
        })
      })
    }
  }
}
</script>

<style lang="scss">
.info {
  .info-box {
    padding-bottom: 10px;
    font-size: 16px;
    display: flex;
    line-height: 30px;
    .info-title {
      color: #606266;
      width: 100px;
      text-align: right;
    }
    .info-value {
      width: 640px;
      color: #333;
      white-space: pre-wrap;
      word-break: break-all;
    }
    .img-list {
      display: flex;
      text-align: center;
      .img-item {
        margin-right: 10px;
        width: 52px;
        height: 52px;
        border: 1px solid #c0c0c0;
      }
    }
  }
  .bottom {
    .info-value {
      max-height: 200px;
      overflow-y: auto;
      .el-timeline {
        .el-timeline-item {
          padding-bottom: 0;
          .el-timeline-item__wrapper {
            top: -8px;
          }
          .el-timeline-item__timestamp.is-bottom {
            margin-top: 0;
            line-height: 1.2;
          }
        }
      }
    }
  }
}
</style>
